<template>
  <div class="inside-comment">
    <div class="layout">
      <div class="supplier-content">
        <div class="top-check">
          <!-- <h2>请选择</h2> -->
          <div class="option-list">
            <div class="option-item" :class="joinDialog == true ? 'cur' : ''">
              <div class="option-title" @click="changeState(true)">创建企业</div>
            </div>
            <div class="option-item" :class="joinDialog == false ? 'cur' : ''">
              <div class="option-title" @click="changeState(false)">加入企业</div>
            </div>
          </div>
        </div>
        
        <div class="establish-enterprise" v-show="joinDialog">
          <div class="form-title">
            企业资料填写
          </div>
          <EnterpriseForm :enterpriseForm="enterpriseForm" ref="enterpriseFormRef"/>
          <div class="footer">
            <el-button type="primary" @click="saveEnterprise">确定</el-button>
          </div>
        </div>
        <div class="join-enterprise" v-show="!joinDialog">
          <el-form :model="applyForm" :rules="applyRules" label-width="100px">
            <!-- <el-form-item label="企业名称" props="name">
              <el-input v-model="applyForm.lssuingAuthority"  placeholder="请输入企业名称" />
            </el-form-item> -->
            <el-form-item label="社会信用代码" props="name">
              <el-input v-model="applyForm.creditCode"  placeholder="请输入社会信用代码" />
            </el-form-item>
            <el-form-item label="其他说明" props="name">
              <el-input v-model="applyForm.remark"  placeholder="请输入其他说明" />
            </el-form-item>
          </el-form>
          <div class="footer">
            <el-button type="primary" @click="applySubmit">确认</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { insertEnterprise, applyToJoinUser, existEnterprise, checkUser } from "@/api/supplier";
import { ElMessage } from "element-plus";
import EnterpriseForm from "../components/EnterpriseForm.vue";
import { useRouter } from "vue-router";

const router = useRouter();
const joinDialog = ref(true)
 
const defaultEnterpriseForm = reactive({
  bankAccount: "",
  bankAccountName: "",
  bankName: "",
  businessLicense: "",
  creditCode: "",
  handlingIdCard: ["",""],
  handlingPerson: "",
  legalIdCard: ["",""],
  legalRepresentative: "",
  name: "",
  position: "",
});
const enterpriseForm = ref(defaultEnterpriseForm);

//提交企业绑定
// const ruleFormRef = ref();
// const saveEnterprise = async (formEl) => {


//     const res = await insertEnterprise(enterpriseForm.value);
//     if (res.code === 200) {
//       ElMessage.success("绑定成功");
//       enterpriseForm.value = defaultEnterpriseForm;
//       //跳转首页
//     } else {
//       ElMessage.error(res.msg);
//     }
// };
const changeState = (item) => { 
  joinDialog.value = item ;
  console.log( joinDialog.value);
  
};

//申请企业
const defaultApplyForm = reactive({
  // lssuingAuthority: "",
  creditCode: "",
  remark: ""
})
const applyForm = ref(defaultApplyForm);
const applySubmit = async () => {
  //检查用户的信用代码是否存在 不存在驳回
  const checkRes = await existEnterprise({
    creditCode: applyForm.value.creditCode
  })
  if (checkRes.code === 20000) {
    if(checkRes.data.isExist == true){
      const res = await applyToJoinUser(applyForm.value)
      if (res.code === 20000) {
        ElMessage.success("提交申请成功，请等待审核");
        applyForm.value = defaultApplyForm;
        //延时一秒跳转首页
        setTimeout(() => {
          router.push("/bidding/user/noticeList");
        }, 1000);
      } else {
        ElMessage.error(res.msg);
      }
    }  else {
      ElMessage.error("企业信用代码不存在，请检查信息是否正确");
      return
    }
  }
};

//提交企业信息
const enterpriseFormRef = ref(null);
const saveEnterprise = async () => {
  // 校验表单
  if (!enterpriseFormRef.value) return;
  try {
    const valid = await enterpriseFormRef.value.validateForm();
    if (!valid) return;

    // 获取表单数据
    const formData = enterpriseFormRef.value.getFormData();
    console.log('表单数据:', formData);

    const res = await insertEnterprise(enterpriseForm.value)
    if (res.code === 20000) {
      ElMessage.success("添加成功");
    }
  } catch (error) {
    console.error("An error occurred:", error);
  }

};

//因为没有做路由权限控制 检查用户是否已经绑了企业或正在审核中 是则跳转首页
const checkEnterprise = async () => {
  const res = await checkUser();
  if (res.code === 20000 && (res.data.hasEnterprise == true || res.data.applyingNow == true)) {
    if (res.data.hasEnterprise == true) {
      ElMessage.warning("您已绑定企业");
    } 
    if (res.data.applyingNow == true) {
      ElMessage.warning("您的账号正在审核中，请等待通过");
    } 
    setTimeout(() => {
      router.push({ path: '/bidding/user/noticeList' });
    }, 1000);
  }
};
onMounted(() => {
  checkEnterprise();
});
</script>

<style scoped lang="scss">
.supplier-content{
  width: 800px;
  max-width: 100%;
  margin: 0 auto ;
}
.top-check{
  h2{

  }
  .option-list{
    /* margin-top: 20px; */
    display: flex;
    .option-item{
      padding: 9px 20px;
      font-size: 16px;
      border: 1px solid $borderColor;
      border-radius: 4px;
      color: $black;
      margin-right: 15px;
      cursor: pointer;
      &.cur{
        background: $mainColor;
        color: white;
      }
    }
  }
}
.join-enterprise, .establish-enterprise{
  margin-top: 20px;
  padding: 20px;
  box-sizing: border-box;
  box-shadow:  0 0 10px rgba(black,.1);
  /* border: 1px solid $borderColor; */
}
.form-title{
  font-size: 22px;
  color: $black;
}
.demo-ruleForm{
  margin: 20px auto 0;
  /* display: flex;
  flex-wrap: wrap;
  .el-form-item{
    width: 50%;
    padding-left: 10px;
    box-sizing: border-box;
  } */
}
.form-img{
  height: 100px;
  width: 150px;
  border: 1px dashed $borderColor;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  .has-img{
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      max-width: 100%;
      max-height: 100%;
    }
    span{
      display: none;
      position: absolute;
      right: 0;
      top: 0;
      background-color: $failColor;
      height: 20px;
      width: 20px;
      font-size: 18px;
      color: #fff;
    }
    &:hover{
      span{
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  } 
}
.footer{
  display: flex;
  justify-content: end;
  max-width: 1000px;
  margin: 20px auto 0;
}
@media (max-width: 960px) {
  .layout{
    padding: 0 20px;
    box-sizing: border-box;
  }
}
</style>